<template>
    <div class="log-menu-open" v-if="!show" @click="show = !show">
        <div class="title-font">{{ $t('components.log.60zdun8pfew0') }}</div>
    </div>
    <div class="log-menu" v-else>
        <div class="title">
            <div class="title-font">{{ $t('components.log.60zdun8pfew0') }}</div>
            <div class="delete"><icon-close @click="show = !show" /></div>
        </div>
        <div class="log-table wrap">
            <div class="log-table-title">
                <div>{{ $t('components.log.60zdun8phlo0') }}</div>
                <div>{{ $t('components.log.60zdun8phvk0') }}</div>
            </div>
            <ul class="info-list-scroll">
                <li v-for="(item, index) in (form.list as any)" :key="index">
                    <div class="content text-ellipsis">
                        <!-- <span class="text-ellipsis">{{$t('components.log.60ze0pa83bw0')}}ID：{{ item.uavId }}</span> -->
                        <span class="text-ellipsis">{{ $t('components.log.60ze0pa83bw1') }}：{{
                            item.uavNum ?item.uavNum:'暂未登记号牌' }}</span>
                    </div>
                    <div class="status">
                        <!-- <div v-if="item.status === 1">{{$t('components.log.60zdun8pi100')}}</div>
                        <div v-else-if="item.status === 2">{{$t('components.log.60zdun8pi600')}}</div>
                        <div v-else-if="item.status === 3">{{$t('components.log.60zdun8pigc0')}}</div>
                        <div v-else-if="item.status === 4">{{$t('components.log.60zdun8pimo0')}}</div>
                        <div v-else-if="item.status === 5">{{$t('components.log.60zdun8pis80')}}</div>
                        <div v-else-if="item.status === 6">{{$t('components.log.60zdun8piww0')}}</div>
                        <div v-else-if="item.status === 7">{{$t('components.log.60zdun8piww1')}}</div>
                        <div v-else-if="item.status === 8">{{$t('components.log.60zdun8pj2c0')}}</div>
                        <div v-else>{{$t('components.log.60zdun8pj7k0')}}</div> -->
                        <div v-if="item.status === 1">{{ $t('components.log.60ze0pa83bw2') }}</div>
                        <div v-else-if="item.status === 2">{{ $t('components.log.60ze0pa83bw3') }}</div>
                        <div v-else-if="item.status === 3">{{ $t('components.log.60ze0pa83bw4') }}</div>
                        <div v-else-if="item.status === 4">{{ $t('components.log.60ze0pa83bw5') }}</div>
                        <div v-else-if="item.status === 5">{{ $t('components.log.60ze0pa83bw6') }}</div>
                        <div v-else-if="item.status === 9">{{ $t('components.log.60ze0pa83bw7') }}</div>
                        <div v-else-if="item.status === 11">{{ $t('components.log.60ze0pa83bw8') }}</div>
                        <div v-else>{{ $t('components.log.60zdun8pj7k0') }}</div>
                    </div>
                    <div class="time">
                        {{ item.createTime ? dayjs.unix(item.createTime).format('HH:mm:ss') : '-' }}
                    </div>
                </li>
                <cIndexNone v-if="!form.list?.length"></cIndexNone>
            </ul>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { apiSpectLogList } from '@/api/index'
import dayjs from 'dayjs'
const show = ref(true)
const local = useLocal()
const form = reactive({
    data: {
        status: 0,
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list: [],
    count: 0
})
// 无人机日志列表
const getData = async () => {
    const { code, data } = await apiSpectLogList({
        ...form.data
    })
    if (code != 200) return;
    form.list = data.list
    form.count = data.total
}
let timer: any
onBeforeMount(async () => {
    await getData()
    timer = setInterval(() => {
        getData()
    }, 1800000)
})
onBeforeUnmount(() => {
    clearInterval(timer)
    timer = null
})
</script>
<style scoped lang="less">
.log-menu-open {
    // margin: 20px;
    width: 160px;
    height: 60px;
    background-image: url('@/assets/images/hidden-wanzhou.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 5px;
    border: 1px solid rgba(46, 116, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;

    .title-font {
        font-family: YouSheBiaoTiHei;
        opacity: 1;
        /** 文本1 */
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        line-height: 24px;
        vertical-align: middle;
        background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.log-menu {
    width: 400px;
    height: 425px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    color: #fff;
    border-radius: 5px;

    .title {
        width: 100%;
        height: 59px;
        background-image: url('@/assets/images/index-menue-title.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-font {
            margin-left: 10px;
            font-family: YouSheBiaoTiHei;
            opacity: 1;
            /** 文本1 */
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0.48px;
            line-height: 24px;
            vertical-align: middle;
            background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }



        .delete {
            width: 35px;
            cursor: pointer;
            font-weight: 600;
            color: rgba(75, 127, 239, 1);
        }
    }

    .log-table {
        background: rgba(15, 19, 41, 0.85);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        .log-table-title {
            border: 1px solid rgba(46, 116, 255, 0.8);
            border-radius: 2px;
            display: flex;
            justify-content: space-between;
            padding: 10px 30px;
        }

        .info-list-scroll {
            flex: 1;
            overflow: auto;
            border: 1px solid rgba(46, 116, 255, 0.8);

            li {
                flex: 1;
                overflow: auto;
                display: flex;
                justify-content: space-between;
                padding: 11.5px 4px 6px 11.5px;
                font-size: 13px;

                .content {
                    flex: 1;
                    display: flex;
                    align-items: center;
                }

                .status {
                    width: 130px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .text-ellipsis {
                    // overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                }

                .time {
                    margin-left: 3px;
                    width: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}
</style>